<template>
  <div class="bread-crumb">
    <div class="bread-crumb-container">
      <el-icon class="back-tag" @click="goBack"><ArrowLeft /></el-icon>
      <div class="bread-crumb-content">
        <div 
          v-for="(item, index) in data"
          :key="index"
          :class="'bread-crumb-item' + (index === data.length -1 ? ' active' : '')"
          @click="goBack"
        >
          <span class="bread-crumb-title">{{ item.title  }}</span>
          <span class="tag" v-if="index < data.length - 1">/</span>
        </div>
      </div>
    </div>
    <p v-show="crumbTitle" class="page-title">{{ crumbTitle }}</p>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
// @ts-ignore
import { getUrlParams, open } from '@/utils/window';
import router from '@/router';
import {
  removeLocalStorage,
} from '@/utils/storage';

export default {
  name: "bread-crumb",
  props: {
    crumbTitle: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: function(){
        return [];
      }
    },
    backPath: {
      type: String,
      default: "",
    }
  },
  methods: {
    goBack(){
      if( !this.backPath ) return;
      removeLocalStorage("DRAFT");
      router.push({
        path:  this.backPath,
      });
    },
  },
};
</script>

<style lang="less">
  .bread-crumb{
    width: 100%;
    height: 94px;
    padding: 0 18px;
    background: #fff;
    .bread-crumb-container{
      display: flex;
      padding: 15px 0;
      align-items: center;
    }
    .back-tag{
      font-size: 16px;
      margin-right:5px;
    }
    .bread-crumb-content{
      display: flex;
      .bread-crumb-item{
        cursor: pointer;
        
        .bread-crumb-title{
          color:#999;
          font-size: 16px;
        }
        &.active{
          .bread-crumb-title{
            color:#333;
          }
        }
        &.pointer{
          cursor: pointer;
        }
        .tag{
          margin: 0 5px;
          font-size: 16px;
        }
      }
    }
    .page-title{
      // padding: 15px 0;
      color: #000;
      text-align: left;
      font-weight: 700;
      font-size: 20px;
      padding: 0;
      margin: 0;
      
    }
  }
</style>
